<template>
  <div class="container">
    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        相关文档：
        <a href="https://element-plus.gitee.io/zh-CN/component/table-v2.html" target="_blank">element-plus Virtualized Table</a>
      </el-col>
    </el-row>

    <el-divider content-position="left">vxe-table</el-divider>

    <div>
      <el-table-v2 :columns="columns" :data="data" :width="800" :height="400" fixed />
    </div>
  </div>
</template>
<script lang="ts" setup name="DemoTable1">
const generateColumns = (length = 10, prefix = "column-", props?: { [key: string]: string | number }) =>
  Array.from({ length }).map((_, columnIndex) => ({
    ...props,
    key: `${prefix}${columnIndex}`,
    dataKey: `${prefix}${columnIndex}`,
    title: `Column ${columnIndex}`,
    width: 150,
  }));

const generateData = (columns: ReturnType<typeof generateColumns>, length = 200, prefix = "row-") =>
  Array.from({ length }).map((_, rowIndex) => {
    const row: { [key: string]: string | number | null } = {
      id: `${prefix}${rowIndex}`,
      parentId: null,
    };
    return columns.reduce((rowData, column, columnIndex) => {
      rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`;
      return rowData;
    }, row);
  });

const columns = generateColumns(10);
const data = generateData(columns, 1000);
</script>
